<template>
  <div class="guixku-intro-page">
    <!-- 导航栏组件 -->
    <NavBar
      :is-logged-in="isLoggedIn"
      @login="login"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />

    <!-- 主要内容容器 -->
    <div class="smt_indexfo">
      <!-- 顶部标题区域 -->
      <div class="smt_indexfo_top">
        <h2>桂小库智能助手，满足用户多种数智化需求</h2>
        <p>提供从智能问答、数据查询、数据图表可视化展现到数据表格生成等数智化支持</p>
      </div>

      <!-- 第一行产品：智能问答和数据分析 -->
      <div class="smt_indexfo_product smt_indexfo_flex">
        <ul>
          <li class="">
            <div class="smt_indexfo_product_left">
              <h2>智能问答</h2>
              <p>提供国库相关智能问答服务，满足用户国库知识需求</p>
              <div class="smt_item_button">
                <a href="#" target="_blank" class="smt_one_buttom" @click.prevent="handleDetail('qa')">
                  <div class="smt_details">
                    <span class="smt_details_conten">详情<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
                <a href="#" rel="nofollow" @click.prevent="handleUse('qa')">
                  <div class="smt_apply">
                    <span class="smt_details_conten smt_button_JsKS">立即使用<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
              </div>
            </div>
            <div class="smt_indexfo_product_right">
              <img :src="require('@/views/UserView/AIAgentIntro/guixku_intro_files/桂小库问答.png')" alt="智能问答">
            </div>
          </li>
          <li class="">
            <div class="smt_indexfo_product_left">
              <h2>数据分析</h2>
              <p>融合大模型与数据库，通过对话完成业务数据的分析</p>
              <div class="smt_item_button">
                <a href="#" target="_blank" class="smt_one_buttom" @click.prevent="handleDetail('analysis')">
                  <div class="smt_details">
                    <span class="smt_details_conten">详情<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
                <a href="#" rel="nofollow" @click.prevent="handleUse('analysis')">
                  <div class="smt_apply">
                    <span class="smt_details_conten smt_button_JsKS">立即使用<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
              </div>
            </div>
            <div class="smt_indexfo_product_right">
              <img :src="require('@/views/UserView/AIAgentIntro/guixku_intro_files/桂小库数据分析.png')" alt="数据分析">
            </div>
          </li>
        </ul>
      </div>

      <!-- 第二行产品：数据图表可视化展现和数据表格生成 -->
      <div class="smt_indexfo_product">
        <ul>
          <li class="">
            <div class="smt_indexfo_product_left">
              <h2>数据图表可视化展现</h2>
              <p>融合大模型、数据库与echarts图表，通过对话完成数据图表生成</p>
              <div class="smt_item_button">
                <a href="#" target="_blank" class="smt_one_buttom" @click.prevent="handleDetail('chart')">
                  <div class="smt_details">
                    <span class="smt_details_conten">详情<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
                <a href="#" rel="nofollow" @click.prevent="handleUse('chart')">
                  <div class="smt_apply">
                    <span class="smt_details_conten smt_button_JsKS">立即使用<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
              </div>
            </div>
            <div class="smt_indexfo_product_right">
              <img :src="require('@/views/UserView/AIAgentIntro/guixku_intro_files/桂小库数据展现.png')" alt="数据图表可视化展现">
            </div>
          </li>
          <li class="smt_indexfo_layer">
            <div class="smt_indexfo_product_left">
              <h2>数据表格生成</h2>
              <p>融合大模型、数据库与excel表格，通过对话完成数据表格生成</p>
              <div class="smt_item_button">
                <a href="#" target="_blank" class="smt_one_buttom" @click.prevent="handleDetail('excel')">
                  <div class="smt_details">
                    <span class="smt_details_conten">详情<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
                <a href="#" rel="nofollow" @click.prevent="handleUse('excel')">
                  <div class="smt_apply">
                    <span class="smt_details_conten smt_button_JsKS">立即使用<span class="smt_arrow">&gt;</span></span>
                    <span class="smt_details_forward">
                      <div class="smt_arr smtarrt1"><em></em></div>
                      <div class="smt_arr smtarrt2"><em></em></div>
                    </span>
                  </div>
                </a>
              </div>
            </div>
            <div class="smt_indexfo_product_right">
              <img :src="require('@/views/UserView/AIAgentIntro/guixku_intro_files/桂小库excel导出.png')" alt="数据表格生成">
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 页脚组件 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'

export default {
  name: 'GuixkuIntro',
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      isLoggedIn: false,
      themeIcon: 'fas fa-moon'
    }
  },
  methods: {
    login() {
      // 登录逻辑
      this.$router.push('/login')
    },
    goToConsole() {
      // 跳转到控制台
      this.$router.push('/console')
    },
    toggleTheme() {
      // 切换主题逻辑
      this.themeIcon = this.themeIcon === 'fas fa-moon' ? 'fas fa-sun' : 'fas fa-moon'
    },
    handleDetail(type) {
      // 处理详情按钮点击
      console.log('查看详情:', type)
      // 可以根据type跳转到不同的详情页面
    },
    handleUse(type) {
      // 处理立即使用按钮点击
      console.log('立即使用:', type)
      // 跳转到对应的功能页面
      const routeMap = {
        qa: '/agent-function/TreasuryAIchat?appName=treasury_app',
        analysis: '/agent-function/TreasuryAIchat?appName=treasury_app',
        chart: '/agent-function/TreasuryAIchat?appName=treasury_app',
        excel: '/agent-function/TreasuryAIchat?appName=treasury_app'
      }
      if (routeMap[type]) {
        window.open(routeMap[type], '_blank', 'noopener,noreferrer')
      }
    }
  }
}
</script>

<style scoped>
.guixku-intro-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7ff 0%, #f0f4ff 100%);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* 顶部标题区域 */
.smt_indexfo .smt_indexfo_top {
  margin: 4.2rem 0 2.8rem 0;
  text-align: center;
  padding-top: 2rem;
}

.smt_indexfo .smt_indexfo_top h2 {
  padding-bottom: 1.04rem;
  font-weight: 400;
  font-size: 2.2rem;
  color: #1b1b1b;
  margin: 1.5rem 0 0 0;
}

.smt_indexfo .smt_indexfo_top p {
  font-size: 1rem;
  color: rgb(27, 27, 27);
  margin: 0.5rem 0 0 0;
}

/* 产品列表容器 */
.smt_indexfo_product {
  margin-bottom: 2rem;
}

.smt_indexfo_product ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: auto;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.smt_indexfo_product li {
  width: 42rem;
  float: left;
  height: 18rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 3px 27px 0px rgba(196, 220, 232, 0.69);
  margin: 0.95rem;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
}

.smt_indexfo_product_right {
  width: 55%;
  float: left;
}

.smt_indexfo_product_left {
  width: 45%;
  float: left;
  padding-left: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.smt_indexfo_product_right img {
  width: 100%;
  margin-top: 1.8rem;
  object-fit: contain;
}

.smt_indexfo_product_left h2 {
  font-size: 1.3rem;
  color: rgb(26, 26, 26);
  font-weight: bold;
  line-height: 0.975;
  margin-top: -0.45rem;
  margin-bottom: 0;
}

.smt_indexfo_product_left p {
  font-size: 0.8rem;
  color: rgb(26, 26, 26);
  line-height: 1.1rem;
  text-align: left;
  padding-top: 1.45rem;
  height: 3.4rem;
  margin: 0;
  margin-top: 1.875rem !important;
}

/* 按钮样式 */
.smt_one_buttom {
  float: center;
  margin-right: 1rem;
  text-decoration: none;
}

.smt_indexfo_product .smt_item_button {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  margin-left: 1.625rem;
}

.smt_indexfo_product .smt_item_button span,
.smt_indexfo_product .smt_details,
.smt_indexfo_product .smt_apply {
  width: 8.05rem;
  height: 3.35rem;
  line-height: 3.35rem;
  font-size: 0.95rem;
  height: 3.35rem !important;
  right: 0.8rem;
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.smt_indexfo_product .smt_apply,
.smt_indexfo_product .smt_details {
  background-color: #f3f3f9;
  border: 1px solid #f3f3f9;
  background-image: none;
  color: #bd1e21;
  text-decoration: none;
}

.smt_indexfo_product li:hover .smt_apply {
  background-color: #fff;
  border: 1px solid #bd1e21;
}

.smt_indexfo_product li:hover .smt_details {
  background-image: -moz-linear-gradient(0deg, rgb(214, 60, 65) 0%, rgb(188, 29, 33) 100%);
  background-image: -webkit-linear-gradient(0deg, rgb(214, 60, 65) 0%, rgb(188, 29, 33) 100%);
  background-image: -ms-linear-gradient(0deg, rgb(214, 60, 65) 0%, rgb(188, 29, 33) 100%);
  color: #bd1e21;
}

.smt_details,
.smt_apply {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.smt_details_conten {
  position: relative;
  z-index: 2;
}

.smt_button_JsKS {
  font-size: 0.84rem;
  color: #bd2e12;
}

.smt_details_forward {
  display: block;
  position: absolute;
  right: 1.2rem;
  width: 1.8rem !important;
  height: 2.61rem !important;
  visibility: hidden;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.smt_details_forward .smt_arr {
  position: absolute;
  top: 46%;
  left: 60%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
}

.smt_details_forward .smt_arr > em {
  width: 0.35rem;
  height: 0.35rem;
  display: inline-block;
  border-left: 0.1rem solid #bd2e12;
  border-top: 0.1rem solid #bd2e12;
  -webkit-transform: rotate(-225deg) !important;
  transform: rotate(-225deg) !important;
}

.smt_details .smt_details_forward .smt_arr > em {
  width: 0.35rem;
  height: 0.35rem;
  display: inline-block;
  border-left: 0.1rem solid #FFFFFF;
  border-top: 0.1rem solid #FFFFFF;
  -webkit-transform: rotate(-225deg) !important;
  transform: rotate(-225deg) !important;
}

.smt_details_forward .smtarrt2 {
  animation: indedx_details_arr_move 1.2s ease-in-out 1.2s infinite;
}

.smt_details_forward .smtarrt1 {
  animation: indedx_details_arr_move 1.2s ease-in-out 0.6s infinite;
}

.smt_apply:hover .smt_details_forward,
.smt_details:hover .smt_details_forward {
  visibility: visible !important;
  position: absolute !important;
}

.smt_apply:hover .smt_arrow,
.smt_details:hover .smt_arrow {
  display: none;
}

.smt_arrow {
  margin-left: 4px;
}

@-webkit-keyframes indedx_details_arr_move {
  0% {
    left: 0%;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-moz-keyframes indedx_details_arr_move {
  0% {
    left: 0%;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes indedx_details_arr_move {
  0% {
    left: 0%;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .smt_indexfo_product li {
    width: calc(50% - 1.9rem);
  }
}

@media (max-width: 768px) {
  .smt_indexfo .smt_indexfo_top {
    margin: 3rem 0 2rem 0;
    padding-top: 1rem;
  }

  .smt_indexfo .smt_indexfo_top h2 {
    font-size: 1.5rem;
  }

  .smt_indexfo_product li {
    width: 100%;
    margin: 0.5rem 0;
    height: auto;
    flex-direction: column;
  }

  .smt_indexfo_product_left {
    width: 100%;
    padding: 1.5rem;
  }

  .smt_indexfo_product_right {
    width: 100%;
  }

  .smt_indexfo_product_right img {
    margin-top: 0;
  }

  .smt_indexfo_product_left h2 {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .smt_indexfo .smt_indexfo_top h2 {
    font-size: 1.2rem;
  }

  .smt_indexfo .smt_indexfo_top p {
    font-size: 0.75rem;
  }

  .smt_indexfo_product_left h2 {
    font-size: 1rem;
  }

  .smt_indexfo_product_left p {
    font-size: 0.7rem;
  }

  .smt_indexfo_product .smt_item_button span,
  .smt_indexfo_product .smt_details,
  .smt_indexfo_product .smt_apply {
    width: 5.5rem;
    font-size: 0.7rem;
  }
}
</style>